<template>
  <div id="zhengce">
    <topBar></topBar>
    <div class="container my-5">
      <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 shadow-lg">
        <div class="row gx-2 gx-lg-3">
          <section class="pt-4 pb-0 card-grid">
            <div class="container">
              <div class="row g-4">
                <!-- Left big card -->
                <div class="col-lg-2"></div>
                <div class="col-lg-4">
                  <br /><br /><br /><br />
                  <h1 class="text-primary">农业新闻</h1>
                </div>
                <!-- Right small cards -->
                <div class="col-lg-6">
                  <div class="row g-4">
                    <!-- Card item START -->
                    <div class="col-12">
                      <div
                        class="
                          card card-overlay-bottom card-grid-sm card-bg-scale
                        "
                        style="
                          background-image: url(static/img/1.jpg);
                          background-position: center left;
                          background-size: cover;
                        "
                      >
                        <!-- Card Image -->
                        <!-- Card Image overlay -->
                        <div
                          class="
                            card-img-overlay
                            d-flex
                            align-items-center
                            p-3 p-sm-4
                          "
                        >
                          <div class="w-100 mt-auto">
                            <!-- Card category -->
                            <a href="#" class="badge bg-warning mb-2">Today</a>
                            <!-- Card title -->
                            <h1 class="text-white">
                              <label
                                class="btn-link stretched-link text-reset"
                                >{{ today }}</label
                              >
                            </h1>
                            <!-- Card info -->
                            <ul
                              class="
                                nav nav-divider
                                text-white-force
                                align-items-center
                                d-none d-sm-inline-block
                              "
                            >
                              <li class="nav-item position-relative">
                                <div class="nav-link">
                                  <lable
                                    class="stretched-link text-reset btn-link"
                                    >农历：{{ nongli }}</lable
                                  >
                                </div>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- Card item END -->
                  </div>
                </div>
              </div>
              <nyxw></nyxw>
            </div>

            <br />
          </section>
        </div>
      </div>
    </div>
    <div class="container my-5">
      <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 shadow-lg">
        <div class="row gx-2 gx-lg-3">
          <frequencyWord></frequencyWord>
        </div>
      </div>
    </div>
    <div class="container my-5">
      <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 shadow-lg">
        <div class="row gx-2 gx-lg-3">
          <zixun></zixun>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from "@/components/util/topBar";
import nyxw from "@/components/producer/nyxw";
import frequencyWord from "@/components/consumer/frequencyWord";
import zixun from "@/components/consumer/zixun";
export default {
  data() {
    return {
      today: "",
      nongli: "",
    };
  },
  components: {
    topBar: topBar,
    nyxw: nyxw,
    frequencyWord: frequencyWord,
    zixun: zixun,
  },
  created() {
    var date = new Date();
    this.today = date.toLocaleDateString();

    this.nongli = new Date()
      .toLocaleDateString("zh-CN-u-ca-chinese")
      .replace(
        /(\d+)\s*?年/,
        (_, y) =>
          "甲乙丙丁戊己庚辛壬癸".charAt((y - 4) % 10) +
          "子丑寅卯辰巳午未申酉戌亥".charAt((y - 4) % 12)
      );
  },
};
</script>

<style scoped>
@import url("../../../static/css/style.css");
header {
  background-color: #2c7d72;
}
</style>

